<script setup>
import SelectorXRadio from '@/components/selector-x/radio.vue'
import ButtonX from '@/components/button-x/index.vue'

const props = defineProps({
  title: String,
  list: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: Number,
    default: 0
  },
  options: {
    type: Object,
    default: () => ({
      label: 'label',
      value: 'value'
    })
  },
  resetButtonType: String,
  resetButtonText: {
    type: String,
    default: '重置'
  },
  applyButtonType: {
    type: String,
    default: 'warn'
  },
  applyButtonText: {
    type: String,
    default: '应用'
  },
})

const emit = defineEmits(['update:modelValue', 'close'])

const popup = ref(null)
const filterIndex = ref(props.modelValue)

watch(props, newProps => {
  if (newProps.modelValue !== filterIndex.value) {
    filterIndex.value = newProps.modelValue
  }
})

watch(filterIndex, () => emit('update:modelValue', filterIndex.value))

const open = () => popup.value.open()
const close = () => {
  popup.value.close()
  emit('close', filterIndex.value)
}

const reset = () => filterIndex.value = 0

defineExpose({
  open,
  close,
  reset
})

</script>

<template>
  <uni-popup ref="popup" type="bottom" :safe-area="false">
    <view class="action-sheet-container">
      <view class="flex-row">
        <view class="title flex-1">{{ props.title }}</view>
        <view class="cancel" @click="close">取消</view>
      </view>
      <selector-x-radio :list="props.list" v-model="filterIndex" :options="props.options" />
      <view class="button-group-container"><slot name="button"></slot></view>
      <view class="button-group-default-container">
        <button-x size="small" :type="props.resetButtonType" @click="reset">{{ props.resetButtonText }}</button-x>
        <button-x size="small" :type="props.applyButtonType">{{ props.applyButtonText }}</button-x>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">

.filter-popup-conaction-sheet-containertainer {
  box-sizing: border-box;
  padding: 52rpx 48rpx 0 48rpx;
  width: 100vw;
  height: 794rpx;
  background-color: $kaoyan-color-14;
  border-radius: 32rpx 32rpx 0 0;
  .title {
    @include fbs(40rpx);
    text-align: left;
    line-height: 56rpx;
  }
  .cancel {
    padding: 8rpx 24rpx;
    @include fs36w400($kaoyan-color-11);
  }

  .button-group-default-container {
    display: none;
    margin-top: 60rpx;
    flex-direction: row;
    align-items: center;
    width: 100%;
    button-x {
      flex: 1;
      &:first-child {
        margin-right: 10rpx;
      }
      &:last-child {
        margin-right: 10rpx;
      }
    }
  }
  .button-group-container:empty + .button-group-default-container {
    display: flex;
  }
}
</style>
